export const DragResizable = {
  data() {
    return {
      domTable:null,
    }
  },
  watch: {
    visible(val){
      this.customKey?this[this.customKey]:this.dragResizeColumns.forEach((val,index) => {
        val.width = this[this.customKey?this.customKey:'dragResizeColumns'+'width'][index]
      })
      // if(val){
        // console.log(document.querySelector(".draggable-parent .ant-table-body"));
        // this.domTable = document.querySelector(".draggable-parent .ant-table-body")
        // this.domTable.addEventListener("mousedown", this.resize);
        // this.domTable.addEventListener("mouseover", this.resize);
        // this.domTable.addEventListener("mouseup", this.resize);
      // } else {
        // this.domTable.removeEventListener("mousedown", this.resize);
        // this.domTable.removeEventListener("mouseover", this.resize);
        // this.domTable.removeEventListener("mouseup", this.resize);
      // }
    }
  },
  computed: {
    draggableComponent: function() {
      return this.dragResizable(this.customKey?this[this.customKey]:this.dragResizeColumns)
    },
    draggableComponentOther: function() {
      return this.dragResizable(this[this.otherKey])
    },
    draggableComponentThree: function() {
      return this.dragResizable(this[this.threeKey])
    },
    // 动态获取scrollX,防止数组固定列的大小变化
    scrollX() {
      return this.customKey?this[this.customKey]:this.dragResizeColumns.reduce((preVal, curVal) => {
        return preVal + curVal.width
      }, 0)
    },
    scrollXOther() {
      return this[this.otherKey].reduce((preVal, curVal) => {
        return preVal + curVal.width
      }, 0)
    },
    scrollXThree() {
      return this[this.threeKey].reduce((preVal, curVal) => {
        return preVal + curVal.width
      }, 0)
    }
  },
  methods: {
    resize(){
      if(this.domTable.scrollWidth > this.domTable.clientWidth){
        this.dragResizeColumns.forEach(val => {
          if(val.dataIndex == 'action'){
            val.fixed = 'right'
          }
        })
      } else {
        this.dragResizeColumns.forEach(val => {
          if(val.dataIndex == 'action'){
            delete val.fixed
          }
        })
      }
    }
  }
}
